<template>
  <view class="content " @tap="moreshowClose">
    <view class="shopInfo">
      <view class="topImg flexB" :style="{ backgroundImage: 'url(' + shoplist.merchantHead + ')' }"  @click="preview">
        <view class="word"></view>
        <view class="topLeft" :style="'margin-top:' + statusBarHeight + 'px;'" @tap.stop="back">
          <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
        </view>
        <view class="topRight" :style="'margin-top:' + statusBarHeight + 'px;'">
          <view style="width: 48rpx; height:48rpx; z-index: 666; border-radius:4rpx; padding:7rpx;">
            <image @tap.stop="phoneClick" src="../static/image/pagesDelivery/iPhone.png" alt />
          </view>
          <view style="width: 48rpx; height:48rpx; z-index: 666; border-radius:4rpx; padding:7rpx; "
            @tap.stop="collectionClick('hasCollect')" v-if="hasCollect">
            <u-icon name="star-fill" color="#ff0000" size="36"></u-icon>
          </view>
          <view style="width: 48rpx; height:48rpx; z-index: 666; border-radius:4rpx; padding:7rpx;"
            @tap.stop="collectionClick('notCollect')" v-else>
            <image src="../static/image/pagesDelivery/collection.png" alt />
          </view>
          <view
            style="width:48rpx; height:48rpx; position:relative;z-index: 666; border-radius:4rpx;padding:0 8rpx;">
            <image @tap.stop="moreclick" class="moreimg" src="../static/image/pagesDelivery/more.png" alt />
            <view v-show="moreShow"
              style="position:absolute; background-color:white; left:-137rpx; top:60rpx; z-index:999; box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.2);border-radius: 12rpx 12rpx 12rpx 12rpx; font-family: PingFang SC, PingFang SC; font-weight: 400;  color: #000000;">
              <view style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;" @tap.stop="share">
                <text>分享商家</text>
              </view>
              <view @tap.stop="phoneClick" style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text>联系商家</text>
              </view>
              <view @tap.stop="moreclick" style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text v-if="hasCollect" @tap.stop="collectionClick('hasCollect')">取消收藏</text>
                <text v-else @tap.stop="collectionClick('notCollect')">收藏商家</text>
              </view>
              <view mode="bottom" @tap.stop="openReport"
                style="padding:24rpx 32rpx 18rpx 32rpx; border-bottom:1rpx solid #ccc;">
                <text>举报商家</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="shopBox">
        <view class="shopName">
          <view class="shopAddress">{{ shoplist.merchantName }}</view>
          <view class="shopStar">
            <view class="star">
              <!-- <image :src="item.img" mode v-for="(item, index) in starimg" :key="index" /> -->
              <!--  v-show="indexStar + 1 < bigStar" -->
              <image style="margin-right:4rpx;" src="../static/image/pagesDelivery/Star.png"
                v-for="(itemStar, indexStar) in Math.floor(shoplist.merchantScore)" :key="indexStar" />
              <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="shoplist.merchantScore % 1 !== 0" />
            </view>
            <view class="score">
              <text>{{ shoplist.merchantScore + (Number.isInteger(shoplist.merchantScore) ? '.0' : '') }}</text>
            </view>
          </view>
          <view class="shopTime">
            <text>营业时间：{{ shoplist.merchantTime }}</text>
          </view>
          <view class="distriBution">
            <text v-if="this.distance < 1" class="distance">约{{ parseFloat(distance*1000).toFixed(2) }}m</text>
            <text v-if="this.distance > 1" class="distance">约{{ parseFloat(distance).toFixed(2) }}km</text>
          </view>
        </view>
        <view class="shopImg">
          <image :src="shoplist.merchantHead" alt  @click="preview1"/>
        </view>
      </view>
      <!-- tab栏切换动态改变激活样式 -->
      <view class="shopNav">
        <view class="nav">
          <view class="nav-list" v-for="(item, index) in navList" :key="item.id" @tap="changeAct(item)">
            <!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
            <view :class="[act == index ? 'name' : '']">
              <text>{{ item.name }}</text>
              <text v-if="index == 1">{{ total }}</text>
            </view>
            <!-- 名字下面的横线 -->
            <view :class="[act == index ? 'line' : '']"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论 -->
    <view class="contenttabs pad32" v-if="content && content.id === 1">

      <view class="comments" v-for="(item, index) in commentslist" :key="index">
        <view class="commentone">
          <view>
            <image class="avatar" src="../static/image/pagesMine/user.png" mode="scaleToFill" />
          </view>
          <view style="flex:1;">
            <view class="person">
              <view>
                <text>匿名</text>
              </view>
              <view class="datatime">{{ item.evaluateCreateTime }}</view>
            </view>
            <view style="display: flex;">
              <image src="../static/image/pagesDelivery/Star.png"
                v-for="(itemStar, indexStar) in Math.floor(item.userRatingType)" :key="indexStar" />
              <image src="../static/image/pagesDelivery/halfwayStar.png" v-show="item.userRatingType % 1 !== 0" />
            </view>
          </view>
        </view>

        <view class="commenttwo">{{ item.userEvaluate }}</view>
        <view class="commentthree">
          <view v-for="(item, index) in item.evaluateAge" :key="index" >
            <view class="evalueImg"><image :src="item.evaluateAge" style="width: 100%;min-height: 140rpx;" mode="widthFix" @click="preview2(item.evaluateAge)"/></view>
          </view>
        </view>
        <view v-if="item.merchantEvaluate" class="reply">
          <text>店家回复:{{ item.merchantEvaluate }}</text>
        </view>
      </view>

    </view>
    <!-- 详情 -->
    <view class="contenttabs" v-else>
      <view class="detail">
        <view  hover-class="none" hover-stop-propagation="false" v-html="aa"></view>
      </view>
      <view @tap="orderClick" class="choosebutton flexC">
        <view class="btn flexC">去下单</view>
      </view>
    </view>
   
    <!-- 服务区域 -->
    <u-popup v-model="serverAllshow" mode="center" border-radius='24'>
      <view style="width: 670rpx;padding: 40rpx 0 8rpx;">
        <view class="flexB pad032" style="margin-bottom: 40rpx;">
          <view class="">
            服务区域
          </view>
          <view class="" @tap="serverAllshow = false">
            <u-icon name="close" color="#7A7D99" size="28"></u-icon>
          </view>
        </view>
        <view class="flexAlginC " style="flex-wrap: wrap;width: 100%;">
          <view class="fs-28 " style="padding-left: 32rpx;color: rgba(0,0,0,0.5);margin-bottom: 32rpx;"
            v-for="(item, index) of serverAllList" :key="index">
            {{ item }}
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 下单弹窗 -->
    <u-popup v-model="ordershow" mode="bottom" border-radius='12'>
      <scroll-view scroll-y="true" style="height: 1100rpx;">
        <view class="payOrderPopup" v-if="ordershow">
        <view class="bgWhite fs-28 " style="padding: 32rpx 24rpx;border-radius: 12rpx ;">
          <view class="flexB">
            <view class="topPrice ">
              <view class="fs-20">
                ￥
              </view>
              <view class="fs-32">
                {{ productComponentSelectPrice ? productComponentSelectPrice.productComponentPrice / 100 :'0'}}
                <!-- 111 -->
              </view>
              <view class="fs-20">
                /台
              </view>
            </view>
            <view class="" @tap="ordershow = false">
              <u-icon name="close" color="#7A7D99" size="28"></u-icon>
            </view>
          </view>

          <view class="" style="margin: 24rpx 0;">
            选择商品
          </view>
          <!-- 获取的数据 要添加滚动效果 -->
          <scroll-view scroll-x="true">
            <view style="  display: flex;">
              <view :class="[index === activeIndex ? 'actiClass' : 'goodsImgs']" v-for="(item, index) in goodsList"
                :key="index" @tap.stop="goodsItemClick(item, index)">
                <view class="goodsImg">
                  <image :src="item.productImg"></image>
                </view>
                <view class="goods-title" style="margin: 24rpx 0;">
                  {{ item.productName }}
                </view>
              </view>
            </view>
          </scroll-view>
          <view style="margin-top: 24rpx;" v-for="(it, ind) of goodAct.appProductComponents" :key="ind"
            @tap="goodSpecClick(ind)">
            <view style="display: inline-block;" :class='goodSpecAct == ind ? "goodSpecActCss" : "goodSpecNoActCss"'>
              {{ it.productComponentName }}
            </view>
          </view>
        </view>
        <view class="bgWhite" style="padding: 32rpx 24rpx;margin: 18rpx 0;border-radius: 12rpx ;">
          <view class="flexB pad24 inpCss" style="margin-bottom: 24rpx;" @tap="selectAddressClick">
            <view class="" style="color: #999;" v-if="backaddlist && backaddlist.length && distance<shoplist.scope">
              {{ backaddlist }}
            </view>
            <view class="" style="color: #999;" v-if="distance>shoplist.scope || !distance">
              超出配送范围，请更换收货地址
            </view>
            <view class="" style="color: #999;" v-if="!backaddlist && distance<shoplist.scope">
              请选择地址
            </view>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
          <view class="flexB pad24 inpCss" @tap="selectTimeClick">
            <view class="" style="color: #999;" v-if="rightnow && rightnow.length">
              {{ rightnow }}
            </view>
            <view class="" style="color: #999;" v-else>
              上门时间
            </view>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
        <view class="bgWhite" style="padding: 32rpx 24rpx;margin-bottom: 18rpx;border-radius: 12rpx ;">
          <view class="flexB">
            <view class="fs-32">
              支付方式
            </view>
            <view class="flexAlginC">
              <!-- <u-icon name="weixin-circle-fill" color="#28C445" size="40"></u-icon> -->
              <image src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill"
                style="width: 36rpx;height: 36rpx;" />
              <view class="fs-32" style="color: #424141;;margin-left: 14rpx; font-weight: 600;">
                支付宝
              </view>
            </view>
          </view>
          <view class="flexAlginC">
            <view class="">
              备注：
            </view>
            <u-input placeholder='请输入' v-model="form.note" />
          </view>
        </view>
        <view class="flexC " style="padding-bottom: 40rpx;">
          <view class="shopcar flexAlginC">
            <view class="chooseprice flexAlginC">
              <view class="flexBaseLine">
                <view class="fs-24">
                  ￥
                </view>
                <view  class="fs-40">
                  {{  shoplist.visitFee?shoplist.visitFee / 100:"" }}
                  <text v-if="shoplist.visitFee" style="margin-left:10rpx;font-size:18rpx;">该费用为师傅上门费</text>
                  <text v-if="!shoplist.visitFee" style="margin-left:10rpx;font-size:18rpx;">暂未设置上门费</text>
                </view>
              </view>
            </view>
            <view @tap="ordersshow" :style="{'background':this.distance > this.shoplist.scope || this.shoplist.businessStatus == 1 || this.shoplist.isInOpenTime == 0 ? '#ccc' : '#d12c25'}" class="payOrderbutton">
              <text>支付订单</text>
            </view>
          </view>
        </view>
      </view>
			</scroll-view>
    </u-popup>
    <!-- 选择时间 -->
    <view v-show="selectTimeshow" @tap="selectTimeshow = false"
      style="width:100%;height:100vh;position:fixed;top:0;left:0; z-index:999999;padding-top:920rpx; background-color:rgba(0,0,0,0.5);">
      <view style="display:flex;height: 800rpx;overflow-y:auto;">
        <view style="width:30%;text-align:center;background-color:#F5F5F5; overflow-y:auto;">
          <view :class="[acttwo == index ? 'timebox' : '']" style="width:100%; height:100rpx; line-height:100rpx; "
            v-for="(item, index) in checktime" :key="index" @tap.stop="cktime(item, index)">
            {{ item.name }}
          </view>
        </view>
        <view style="flex:1;background-color:white; overflow-y:auto;padding-bottom:200rpx;">
          <div style=" height:100rpx; line-height:100rpx; padding-left:50px; " @tap.stop="selecttime(item)"
            v-for="(item, index) in timearrtwo" :key="index">
            {{ item }}
          </div>
        </view>
      </view>
    </view>
    <!-- <u-popup v-model="selectTimeshow" mode="bottom" border-radius='12' > -->

    <!-- </u-popup> -->
    <!-- 举报商家 -->
    <u-popup v-model="reportpop" mode="bottom" border-radius='12'>
      <view class="report">
        <view class="flexB">
          <view class="fs-32">
            举报内容
          </view>
          <view class="" @tap="reportpop = false">
            <u-icon name="close" color="#7A7D99" size="28"></u-icon>
          </view>
        </view>

        <u-form :model="reportForm" ref="uForm">
          <u-form-item label-width="150" label="举报类型" prop="choose"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view @tap="reportFormTypeShow = true" style="display:flex; width:100%; justify-content: space-between;">
              <text>{{ reportForm.choose }}</text>
              <text class="icon">&#xe62d;</text>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="下单状态"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view style="display:flex; width:100%;">
              <view @tap="orderSelect = 0" style="margin:0 28rpx; display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" mode="" v-if="orderSelect == 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" mode="" v-if="orderSelect != 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>已下单</text>
              </view>
              <view @tap="orderSelect = 1" style="display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" v-if="orderSelect == 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" v-if="orderSelect != 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>未下单</text>
              </view>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="" prop="uploadimg"
            style="padding: 0;margin-top:24rpx;border-radius: 12rpx;display: flex; flex-wrap: wrap;">
            <view class="pre-box" @tap='uploadimg'>

              <u-upload width="180" height="180" :custom-btn="true" @on-choose-fail="onChooseFail"
                :before-remove="beforeRemove" ref="uUpload" :show-upload-list="true" :action="action"
                :auto-upload="true" :file-list="fileList" :show-progress="true" :deletable="true" :header="uploadToken"
                :max-count="6" @on-list-change="onListChange" :on-remove="uploadRemove" @on-success="uploadSuccess" :size-type="['compressed']" :max-size="FileSize">
                <view slot="addBtn">
                  <image src="/static/image/upload_icon.png" mode=""
                    style="width: 160rpx;height: 150rpx;border-radius: 12rpx;"></image>
                </view>
              </u-upload>
            </view>

          </u-form-item>
          <u-form-item label="电话" prop="iphone"
            style="padding: 0 24rpx; border:1rpx solid #ccc;   border-radius:12rpx;">
            <u-input placeholder="请输入电话" v-model="reportForm.iphone" maxlength="11" />
          </u-form-item>
          <u-form-item label="" prop="textinput"
            style="padding: 0 24rpx; border:1rpx solid #ccc; margin-top:24rpx; border-radius:12rpx;">
            <u-input placeholder="请填写举报内容" v-model="reportForm.textinput" type="textarea" :height="100"
              :auto-height="true" />
          </u-form-item>
        </u-form>

      </view>
      <view style="margin: 0 32rpx 200rpx 32rpx;">
        <u-button style="border-radius: 1998rpx ;" @tap="reportSubmit" type="error">确定</u-button>
      </view>
    </u-popup>
    <u-popup v-model="reportcen" mode="center" border-radius="14">
      <view style="width: 670rpx; height: 436rpx;">
        <view style="margin:40rpx 32rpx 80rpx 32rpx; display:flex; justify-content:space-between;">
          <view>举报完毕</view>
          <view @tap="reportclose">
            <u-icon name="close"></u-icon>
          </view>
        </view>
        <view
          style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: rgba(0,0,0,0.5); text-indent: 2em; margin:0 32rpx;">
          感谢您的配合，经核实举报内容信息真实后，平台将对商家进行处罚</view>
        <view style="margin:80rpx 62rpx 40rpx 62rpx; ">
          <u-button style="border-radius: 1998rpx ;" @tap="reportclose" type="error">确定</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 举报商家 类型 -->
    <u-picker mode="selector" v-model="reportFormTypeShow" :default-selector="[0]" :range="reportFormTypeSelector"
      @confirm='reportFormTypeConfirm' range-key="name"></u-picker>
	  <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="WRITE_EXTERNAL_STORAGE" :style="'margin-top:' + statusBarHeight + 'px;'"></ykAuthpup>
	  <ykAuthpup ref="authpupPhone" type="top" @changeAuth="changeAuthphone" permissionID="CALL_PHONE"></ykAuthpup>
  </view>
</template>

<script>
import { collectMerchant, selectEvaluateId, insertReport, selectMerchant, createOrder,getTakeoutFeeAndDistance, IsMerchant as IsMerchantReq } from '@/api/common'
import { selectsUpDown } from '@/api/maintain'
import { BASE_URL_IMG } from '@/api/request'
import { debounce } from 'lodash'
import { FileSize } from '@/common/fileSize'
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
let that = null;
export default {
	components: {
		ykAuthpup
	},
  data() {
    return {
      FileSize,
      more: false,
      shoplist: [],
      shoplistid: 0,
      orderSelect: 0,
      form: {
        note: "",
      },
      checktime: [
        {
          name: '今天'
        },
        {
          name: '明天'
        },
        {
          name: '后天'
        }
      ],
      hasCollect: false, //是否已经收藏店铺
      reportFormTypeShow: false, //举报商家 类型
      reportFormTypeSelector: [
        {
          id: 1,
          name: '刷销量'
        },
        {
          id: 2,
          name: '刷评价'
        },
        {
          id: 3,
          name: '引导收藏,转单'
        },
        {
          id: 4,
          name: '其他'
        },
      ],
      reportForm: {
        iphone: null, //电话
        choose: '',
        orderstatus: '',
        textinput: ''
      }, //投诉商家form
      reportpop: false,
      reportRules: {
        iphone: [{
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"]
        },
        {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: "手机号码不正确",
          // 触发器可以同时用blur和change
          trigger: ["blur"]
        }
        ],
        choose: [
          {
            type: "string",
            required: true,
            message: "请选择",
            trigger: ["change", "blur"]
          }
        ],

        textinput: [
          {
            type: "string",
            required: true,
            message: "请输入举报内容",
            trigger: ["change", "blur"]
          }
        ]
      },
      filesArr: [],
      id: '', //从页面跳转获取id,再进行获取数据
      moreShow: false,
      reportpop: false,
      statusBarHeight: 0,
      backgroundImage: '',
      backaddlist: '', //选择的收货地址
      selectTime: null,
      selectTimeshow: false,
      count: 5,
      bigStar: 5,
      serverAllshow: false,
      serverAllList: [
        '文昌街道', '渔阳镇', '洇溜镇', '官庄镇', '马伸桥镇', '下营镇', '邦均镇'
      ],
      ordershow: false,
      act: 0,
      navList: [{
        id: 0,
        name: "服务详情",
      },
      {
        id: 1,
        name: "用户评价"
      }
      ],
      content: null,
      ServiceList: [
        '响应及时快速，服务周到；', '主营家用定频、变频空调，空调挂机柜机的空的 调移机、空调拆装、空调加氯等服务；', '空调拆装；'
      ],
      // 下单时的商品数据

      goodSpecAct: 0, //默认规格选择第一个
      goodAct: {
        appProductComponents: []
      }, //默认显示的规格
      goodsList: [],
      //评论数据
      commentslist: [],
      // 选择商品点击效果
      activeIndex: 0,
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      action: '',
      fileList: [],
      nowFileList: [],
      uploadToken: {
        Authorization: ''
      },
      lists: [],
      reportcen: false,
      productComponentSelectPrice: null,
      datatype: 0,
      useradd: '',
      iphoneuser: '',
      orderNum: '',
      aa: '',
      commentsnum: 0,
      total: 0,
      acttwo: 0,
      timearr: [],
      timearrtwo: [],
      overtime: null,
      rightnow: '',
      distance:null
    }
  },
  onReady() { },
  onLoad(opt) {
    console.log("opt",opt)
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    this.shoplistid = opt.id
    this.distance=opt.distance
    console.log('看看传过来的数据', this.shoplistid)

    this.getshoplist()
    this.getcommentslist()
    if (opt.id) {
      this.id = opt.id; //
      that.backgroundImage = {
        backgroundImage: `url(../static/image/delivery/deliveryBg.png)`,
      }
    }
    if(this.uploadToken.Authorization != "") {
      this.IsMerchant()	
    }

  },
  onShow() {

  },
  methods: {
    IsMerchant() {
	  		  IsMerchantReq({ merchantId: this.shoplistid }).then(res => {
				  if (res.data.favoriteMerchant == 1) {
				    this.hasCollect = true
				  } else {
				    this.hasCollect = false
				  }
	  		  })
	  },
	  //权限说明组件弹框
	  uploadimg(){
	      this.$refs['authpup'].open();
	  },
	  changeAuth(){
	    	console.log('同意后执行');
        this.onListChange()
        this.beforeRemove()
        this.onChooseFail()
        this.uploadRemove()
        this.uploadSuccess()
	  },
    //预览图片
    preview() {
      uni.previewImage({
        urls: [this.shoplist.merchantHead], // 需要预览的图片链接列表
      });
    },
    preview1() {
      uni.previewImage({
        urls: [this.shoplist.merchantHead], // 需要预览的图片链接列表
      });
    },
    preview2(img) {
      uni.previewImage({
        urls: [img], // 需要预览的图片链接列表
      });
      
    },
    //评论接口
    getcommentslist() {
      let obj = {
        merchantId: this.shoplistid,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // merchantId:this.shoplistid
      }
      selectEvaluateId(obj).then(res => {
        console.log('评论', res.data, this.pageNum)
        // res.data.forEach(item => {
        // 	item.evaluateImageList = item.evaluateAge.split(',')
        // });
        console.log('看看页数', this.pageNum)
        if (this.pageNum == 1) {
          this.commentslist = res.data.appPromerProEvaMiddles
          this.total = res.data.total
          console.log('评论列表', this.commentslist)
        } else {
          this.commentslist = this.commentslist.concat(res.data.appPromerProEvaMiddles)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
        console.log(this.commentslist)
      })
    },
    //计算时间
    gettime() {
      that = this
      that.timearr = []
      const current_time = new Date()
      const date = new Date(current_time);
      const year = date.getFullYear(); // 获取年份
      const month = date.getMonth() + 1; // 获取月份，注意月份是从0开始的，所以需要加1
      const day = date.getDate(); // 获取日期
      const hourstwo = date.getHours(); // 获取小时
      const minutestwo = date.getMinutes(); // 获取分钟
      const secondstwo = date.getSeconds(); // 获取秒
      const str = that.overtime;
      const parts = str.split("-");
      console.log('parts', parts)
      const result = parts[1].split(":")[0];
      const resulttwo = parts[1].split(":")[1];
      const resultthree = parts[0].split(":")[0];
      const numcheck = parseInt(resultthree, 10);
      console.log('numcheck', numcheck)
      const resultfour = parts[0].split(":")[1];
      console.log('acttwo', hourstwo)
      if (that.acttwo == 0) {
        for (let i = hourstwo; i <= result; i++) {
          that.timearr.push(i)
        }
        console.log('minutestwo', minutestwo)
        for (let i = 0; i < that.timearr.length; i++) {
          if (i == that.timearr.length - 1) {
            if (minutestwo > 20) {
              that.timearrtwo.push(`${that.timearr[i]}:00`)
              that.timearrtwo.push(`${that.timearr[i]}:20`)
            } else if (minutestwo > 40) {
              that.timearrtwo.push(`${that.timearr[i]}:40`)
            }
          } else if (i == 0) {
            if (minutestwo < 20) {
              // that.timearrtwo.push(`${that.timearr[i]}:00`)
              that.timearrtwo.push(`${that.timearr[i]}:20`)
            } else if (minutestwo < 40) {
              that.timearrtwo.push(`${that.timearr[i]}:40`)
            }
          } else {
            that.timearrtwo.push(`${that.timearr[i]}:00`)
            that.timearrtwo.push(`${that.timearr[i]}:20`)
            that.timearrtwo.push(`${that.timearr[i]}:40`)
          }
        }
        console.log('this.timearrtwo', that.timearrtwo)
      } else if (that.acttwo != 0) {

        for (let i = numcheck; i <= result; i++) {
          that.timearr.push(i)
        }
        console.log('this.timearr第二次', that.timearr)
        for (let i = 0; i < that.timearr.length; i++) {
          if (i == that.timearr.length - 1) {
            console.log('11')
            if (resulttwo > 20) {
              that.timearrtwo.push(`${that.timearr[i]}:00`)
              that.timearrtwo.push(`${that.timearr[i]}:20`)
            } else if (resulttwo > 40) {
              that.timearrtwo.push(`${that.timearr[i]}:40`)
            }
          } else if (i == 0) {

            if (resultfour < 20) {
              console.log('resultthree', resultfour)
              that.timearrtwo.push(`${that.timearr[i]}:00`)
              that.timearrtwo.push(`${that.timearr[i]}:20`)
            } else if (resultfour < 40) {
              that.timearrtwo.push(`${that.timearr[i]}:40`)
            }
          } else {
            that.timearrtwo.push(`${that.timearr[i]}:00`)
            that.timearrtwo.push(`${that.timearr[i]}:20`)
            that.timearrtwo.push(`${that.timearr[i]}:40`)
          }
        }
        console.log('that.timearrtwo', that.timearrtwo)
      }
    },
    selecttime(item) {
      console.log("看看这个数据",item)
      const [hours, minutes] = item.split(':');
      const formattedHours = hours.padStart(2, '0');
      const formattedMinutes = minutes.padStart(2, '0');
      const current_time = new Date()
      const tomorrow = new Date(current_time.getTime() + 24 * 60 * 60 * 1000);
      const date = new Date(current_time);
      const year = date.getFullYear(); // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份是从0开始的，所以需要加1
      const day = String(date.getDate()).padStart(2, '0') ; // 获取日期
      const yeartwo = tomorrow.getFullYear();
      const monthtwo = String(tomorrow.getMonth() + 1).padStart(2, '0');
      const daytwo = String(tomorrow.getDate()).padStart(2, '0');
      const dayAfterTomorrow = new Date(current_time.getTime() + 2 * 24 * 60 * 60 * 1000);
      const yearthree = dayAfterTomorrow.getFullYear();
      const monththree = String(dayAfterTomorrow.getMonth() + 1).padStart(2, '0');
      const daythree = String(dayAfterTomorrow.getDate()).padStart(2, '0');
      if (this.acttwo == 0) {
        this.rightnow = year + '-' + month + '-' + day + ' ' + formattedHours + ':'+ formattedMinutes + ':' + '00'
      } else if (this.acttwo == 1) {
        this.rightnow = yeartwo + '-' + monthtwo + '-' + daytwo + ' ' + formattedHours + ':'+ formattedMinutes + ':' + '00'
      } else if (this.acttwo == 2) {
        this.rightnow = yearthree + '-' + monththree + '-' + daythree + ' ' + formattedHours + ':'+ formattedMinutes + ':' + '00'
      }
      this.selectTimeshow = false
      console.log('this.rightnow', this.rightnow)
    },
    //详情接口
    getshoplist() {
      let obj = {
        merchantId: this.shoplistid
      }
      selectMerchant(obj).then(res => {
        console.log('商家列表', res)
        this.shoplist = res.data
        this.overtime = this.shoplist.merchantTime
        let merchantIntroduce = res.data.merchantIntroduce
        // merchantIntroduce = merchantIntroduce.replace(/\n/g, '<br>');
        merchantIntroduce = merchantIntroduce.replace(new RegExp(/( )/g),`&nbsp;`);
        this.aa = merchantIntroduce
        console.log(this.aa);
        this.gettime()
      })
    },
    share() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: "https://agreement.hxzx365.com/agent/",
        title: this.shoplist.merchantName,
        summary: this.shoplist.merchantAddress,
        imageUrl: this.shoplist.merchantHead,
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
          if(err.errCode == -8){
            uni.showToast({
              title:"未安装微信",
              icon:'none'
            })
          }
        }
      });
    },
    //举报接口
    getreport() {
      let obj = {
        // reportType: 1,
        // reportOrderStatus: 1,
        // reportContents: '为什么没有举报',
        // userPhone: '13333333333'
        merchantName: this.shoplist.merchantName,
        merchantId: this.shoplist.merchantId,
        reportType: this.datatype,
        reportOrderStatus: this.orderSelect + 1,
        reportContents: this.reportForm.textinput,
        reportImg: this.nowFileList,
        userPhone: this.reportForm.iphone,
        deptId:this.shoplist.deptId
      }
      insertReport(obj).then(res => {
        console.log('举报商家数据看看看', res)
        if(res.code==200){
          this.reportpop = false;
        }
      })
    },
    // 返回
    back() {
      uni.navigateBack()
    },
    moreshowClose() {
      if (this.moreShow) {
        this.moreShow = false
      }
    },
    // 更多
    moreclick() {
      this.moreShow = !this.moreShow;
    },
    // 收藏
    collectionClick: debounce(function () {
      let obj = {
        // merchantId:"1181b1fd01624ec2bcdd1707a62f15d9",
        merchantId: this.shoplistid
      }
      collectMerchant(obj).then(res => {
        console.log('收藏', res)
        this.hasCollect = !this.hasCollect
        this.$u.toast(res.data);
      })
    }, 300),
    // 举报商家事件
    openReport() {
      this.nowFileList = []
      this.reportpop = true;
      this.reportForm.iphone = ''
      this.reportForm.choose = ''
      this.reportForm.orderstatus = ''
      this.reportForm.textinput = ''
      this.lists = []
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      console.log(this.$refs);
      if(this.uploadToken.Authorization) {
        this.$nextTick(() => {
          that.$refs.uForm.setRules(that.reportRules);
        });
      } else {
        let fromPage=true
        uni.redirectTo({
          url: `/pages/login/login?fromPage=${fromPage}`
        })	
      }
    },
    reportFormTypeConfirm(data) {
      this.datatype = this.reportFormTypeSelector[data].id
      this.reportForm.choose = this.reportFormTypeSelector[data].name
      console.log('看看typedata', this.datatype);
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 投诉商家
    reportSubmit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.reportcen = true;
          this.reportpop = false;
          this.getreport()
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      });
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      console.log('看看这个files', files);

    },
    changeAuthphone(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
     uni.makePhoneCall({
        phoneNumber: this.shoplist.customerCall
      });
		},
    // 打电话
    phoneClick() {
      console.log('打电话')
        this.$refs['authpupPhone'].open();
    },
    changeAct(item) {

      // 激活样式是当前点击的对应下标--list中对应id
      this.act = item.id;
      // 可以根据点击事件改变内容
      this.content = item;
      console.log('看看点击什么', this.content.id)
      if (item.id == 1) {
        this.pageNum = 1
        this.pagesStatus = false
        this.getcommentslist()
      }
    },
    // 去下單
    orderClick() {
      let obj = {
        merchantId: this.shoplist.merchantId,
      }
      selectsUpDown(obj).then(res => {
        console.log("res",res.data);
        if(res.data.length===0){
          this.$u.toast('暂无商品');
        }else{
          this.goodsList = res.data
          this.ordershow = true
          console.log('this.goodsList',this.goodsList)
          this.goodAct = res.data[this.activeIndex]
          console.log('看看数据内容', this.goodsList)
          console.log('看看goodAct', this.goodAct)
          let zero = this.goodSpecAct
          console.log('看看zero', zero)
          this.productComponentSelectPrice = this.goodAct.appProductComponents[zero],
          console.log('看看东西', this.productComponentSelectPrice)
        }
      })
    },
    // 选择商品
    goodsItemClick(item, index) {
      this.goodSpecAct = 0
      console.log(index, '选择商品')
      this.activeIndex = index
      this.orderClick()
    },
    // 选择商品规格
    goodSpecClick(ind) {
      this.goodSpecAct = ind
      this.orderClick()
    },
    // 选择地址
    selectAddressClick() {
      uni.$once('nextStep', function (e) {
        console.log('eee', e)
        that.backaddlist = e[0].consigneeAddress.replace(';','')
        that.useradd = e[0].consigneeName
        that.iphoneuser = e[0].consigneeTelephone
        console.log(that.backaddlist, '看看我获取到没')
        let obj={
        userLng:e[0].consigneeLng,
        userLat:e[0].consigneeLat,
        merchantLng:that.shoplist.lng,
        merchantLat:that.shoplist.lat,
      }
      getTakeoutFeeAndDistance(obj).then(res=>{
        console.log('看看距离',res)
        that.distance=res.data.distance
        if(this.distance>that.shoplist.scope){
          uni.showToast({
            title:'超出配送范围',
            icon:'none'
          })
        }else{
          that.addshow = that.backaddlist
        }
      })
      })
      uni.navigateTo({
        url: "/pagesMine/mineAddress"
      });
    },

    // 选择上门时间
    selectTimeClick() {
      this.selectTimeshow = true
    },
    selectTimeConfirm(time) {
      let now = new Date();
      let year = now.getFullYear();
      this.selectTime = time.day + ' ' + time.hour + ':' + time.minute
      console.log(time, 'xianshi deshuju', this.selectTime)
      this.checktime = year + '-' + time.month + '-' + time.day + ' ' + time.hour + ':' + '00' + ':' + '00'
    },
    // 支付订单
    ordersshow() {
      console.log('backaddlist', that.backaddlist)
      if(that.distance>that.shoplist.scope){
        uni.showToast({
          title: '超出配送范围',
          icon: 'none'
        })
      }else if(this.shoplist.businessStatus == 1 || this.shoplist.isInOpenTime == 0){
        uni.showToast({
          title: '店铺已打烊',
          icon: 'none',
          duration: 2000
        });
      } else if(!that.backaddlist) {
        uni.showToast({
          title: '请选择地址',
          icon: 'none'
        })
      }else if(!that.rightnow){
        uni.showToast({
          title: '请选择上门时间',
          icon: 'none'
        })
      }else{
        console.log(this.form)
        let obj = {
          userName: this.useradd,
          userPhone: this.iphoneuser,
          merchantId: this.shoplist.merchantId,
          userAddress: this.backaddlist,
          merchantName: this.shoplist.merchantName,
          payType: 1,
          orderType: 4,
          userLng: this.shoplist.lng,
          userLat: this.shoplist.lat,
          remake: this.form.note,
          arrivalTimeStr: this.rightnow,
          orderProductsList: [
            {
              productId: this.goodAct.productId,
              productCount: 1,
              productImg: this.goodAct.productImg,
              appProductComponents: [
                {
                  productComponentId: this.productComponentSelectPrice.productComponentId
                }
              ]
            }
          ]
        }
        createOrder(obj).then(res => {
          this.orderNum = res.data.orderNum
          console.log('创建订单', this.orderNum)
          uni.navigateTo({
            url: "/pagesMaintain/maintainOrders?orderNum=" + this.orderNum
          });
        })
      }
    },
    deleteItem(index) {
      console.log('1')
      this.$refs.uUpload.remove(index);
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    uploadRemove(e) {
      // this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    beforeRemove(index, lists) {
      console.log("aaa", this.lists[index]);
      this.nowFileList.splice(index, 1)
      console.log('this.nowFileList', this.nowFileList)
    },
    onChooseFail(e) {
      console.log(e);
    },
    reportclose() {
      this.reportcen = false;
      this.more = false;
      this.reportpop = false;
      this.form.iphone = null
    },
    cktime(item, index) {
      console.log(index)
      this.acttwo = index
      this.timearrtwo = []
      this.gettime()
    }
  },
  // 下拉加载
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getcommentslist()
    }
  },
}
</script>

<style scoped lang="scss">
@import "@/api/main.css";

.goods-title {
  width:100%;  
  height: 80rpx;  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2; /* 限制显示的行数为2 */ 
  line-height: 40rpx;
  overflow: hidden;  
  text-overflow: ellipsis;  
}

.goodSpecActCss {
  padding: 8rpx 18rpx;
  color: #ffffff;
  background: #D12C25;
  border-radius: 12rpx;
}

.goodSpecNoActCss {
  padding: 8rpx 18rpx;
  border: 1rpx solid #999999;
  color: #000000;
  border-radius: 12rpx;
}

.content {
  // background: #E6E6E6;
  // height: 100vh;
  // display: flex;
  // flex-direction: column;

  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .shopInfo {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .topImg {
    width: 100vw;
    padding: 32rpx 32rpx 80rpx;
    position: relative;

    .word {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      z-index: 2;
    }

    .topLeft {
      width: 48rpx;
      height: 48rpx;
      border-radius: 4rpx;
      padding: 6rpx;
      z-index: 666;
    }

    .topRight {
      display: flex;
      justify-content: space-between;
      width: 226rpx;

      image {
        width: 36rpx;
        height: 36rpx;
      }

      .moreimg {
        margin-top: 12rpx;
        width: 36rpx;
        height: 12rpx;
      }

      .moreItem {
        padding: 24rpx 32rpx 18rpx 32rpx;
        border-bottom: 1rpx solid #ccc;
      }
    }
  }

  .shopBox {
    position: relative;
    background: white;
    border-radius: 12rpx 12rpx 0rpx 0rpx;

    .shopName {
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      padding: 24rpx 0rpx 18rpx 32rpx;
      width: 500rpx;

      .shopAddress {
        line-height: 50rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;

      }

      .shopStar {
        height: 46rpx;
        display: flex;
        align-items: center;

        .star {
          height: 22rpx;
          display: flex;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .startwo {
          height: 22rpx;
          display: flex;
          margin-left: 64rpx;
          margin-right: 8rpx;

          image {
            width: 24rpx;
            height: 22rpx;
            margin-left: 4rpx;
          }
        }

        .score {
          height: 38rpx;
          font-family: DIN, DIN;
          font-weight: bold;
          font-size: 36rpx;
          color: #D12C25;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-left: 18rpx;
        }

        .scoretwo {
          height: 38rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .shopTime {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        font-style: normal;
        text-transform: none;
        margin-top: 18rpx;
      }

      .distriBution {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 33rpx;
        font-style: normal;
        margin: 18rpx 0rpx;
        display: flex;

        .shoptext {
          margin-left: 32rpx;
        }

        .shopLine {
          margin-left: 16rpx;
        }

        .shopOne {
          margin-left: 16rpx;
        }
      }

      .announcement {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130606;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;

        .clickAllservice {
          color: #D12C25;
          margin-left: 18rpx;
        }
      }
    }

    .shopImg {
      width: 156rpx;
      height: 156rpx;
      position: absolute;
      right: 32rpx;
      top: -24rpx;
      border-radius: 6rpx;
      overflow: hidden;
      z-index: 66;

      image {
        width: 100%;
        height: 100%;
        border-radius: 6rpx;  
        border: 1rpx solid #fff;
      }
    }
  }

  .shopNav {
    display: flex;
    border-bottom: 1rpx solid #999999;
    background-color: white;
  }

  .nav {
    width: 506rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
  }

  .nav-list {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;

  }

  .nav-list .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #d12c25;
    line-height: 42rpx;
    text-align: center;
    font-style: normal;
  }

  .nav-list .line {
    margin-top: 5rpx;
    width: 64rpx;
    height: 4rpx;
    background-color: #D12C25;
    margin-left: 32rpx;
    position: relative;
    top: 3rpx;
  }

  /* 内容 */
  .contenttabs {

    .comments {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #999999;

   .commentone {
        display: flex;

        .avatar {
          width: 68rpx;
          height: 68rpx;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .person {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 4rpx;
        }

        image {
          width: 24rpx;
          height: 22rpx;
        }

        .datatime {

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: right;
          font-style: normal;
          text-transform: none;

        }
      }

      .commenttwo {
        margin-top: 24rpx;
      }

      .commentthree {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;
        .evalueImg {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          margin-left: 14rpx;
          margin-bottom: 14rpx;
          overflow: hidden;
        }
      }

      .reply {
        width: 100%;
        padding: 16rpx 32rpx;
        background-color: #F2F2F2;

      }
    }

    .detail {
      // width: 686rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      font-style: normal;
      padding:30rpx 30rpx 150rpx 30rpx;

      .title {
        line-height: 33rpx;
        text-align: left;
        margin-bottom: 18rpx;
      }

      .cont {
        text-align: justified;
        text-transform: none;
        text-indent: 32rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }

      .ServiceListCss {
        padding-left: 33rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }
    }

  }

  // 按钮
  .choosebutton {
    position: fixed;
    width: 100vw;
    bottom: 0rpx;
    height: 150rpx;
    background: #fff;
    width: 100%;

    .btn {
      width: 686rpx;
      height: 96rpx;
      background: #D12C25;
      border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }

  .topPrice {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #D12C25;
    text-align: justified;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: baseline;
  }

  .payOrderPopup {
    width: 100vw;
    padding: 0 32rpx;
    background: linear-gradient(180deg, #FFFFFF 6%, #F5F5F5 25%);
  }

  .goodsImgs {
    margin-right: 34rpx;
    width: 190rpx;

    .goodsImg {
      width: 190rpx;
      height: 144rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }
  }

  .actiClass {
    margin-right: 34rpx;
    width: 190rpx;
    background: #E6E6E6;
    border-radius: 12rpx;

    .goodsImg {
      width: 190rpx;
      height: 144rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }
  }


  .inpCss {
    border-radius: 12rpx;
    border: 1rpx solid #999999;
  }

  .shopcar {
    width: 686rpx;
    height: 96rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;

    .chooseprice {
      width: 512rpx;
      height: 96rpx;
      padding-left: 32rpx;
      background-color: #333333;
      border-radius: 176rpx 0 0 176rpx;
      color: #ffffff;
      font-style: normal;
    }

    .payOrderbutton {
      width: 174rpx;
      height: 96rpx;
      background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
      border-radius: 0rpx 176rpx 176rpx 0rpx;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 96rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }

  .timebox {
    background-color: white;
  }

}

.report {
  margin: 0 32rpx 200rpx 32rpx;
  padding: 32rpx 24rpx 0 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;

  .reportlist {
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    justify-content: space-between;
    border-radius: 12rpx;
    padding: 24rpx;
  }
}

.pre-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  // .pre-box ::v-deep(.data-v-2e00e22c) {
  // 	width: 0rpx;
  // }	
  .pre-item {
    width: 160rpx;
    height: 150rpx;
    border-radius: 12rpx;
    overflow: hidden;
    position: relative;
    margin: 0 10rpx;
    margin-bottom: 20rpx;
    display: flex;
  }

  .pre-item-image {
    width: 100%;
    height: 100%;
  }

  .u-delete-icon {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    z-index: 10;
    background-color: $u-type-error;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.u-progress {
  position: absolute;
  bottom: 10rpx;
  left: 8rpx;
  right: 8rpx;
  z-index: 9;
  width: auto;
}
</style>